<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>20167735</title>

<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/templatemo-style.css">

<script src="js/vendor/modernizr-2.6.2.min.js"></script>

</head>

<body>

<div id="home" class="carousel slide carousel-fade" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
		<div class="item active">
			<div class="item-1"></div>
			<div class="carousel-caption">
				<div class="container">
					<div class="col-md-offset-2 col-md-8 col-sm-12">
						<h2>DATE</h2>
						<p><strong><span class="green">MADE </span><span class="yellow">from</span></strong>
							 2018.11.29 to ???????</p>
						<a href="#" class="button default">date</a>
					</div>
				</div>
			</div>
		</div>
		<div class="item">
			<div class="item-2"></div>
			<div class="carousel-caption">
				<div class="container">
					<div class="col-md-offset-2 col-md-8 col-sm-12">
						<h2>USE</h2>
						<p>INCLUDE <a rel="nofollow" href="#"><span class="yellow">:</span></a>
							html , JS , css</p>
						<a href="#" class="button default">use</a>
					</div>
				</div>
			</div>
		</div>
		<div class="item">
			<div class="item-3"></div>
			<div class="carousel-caption">
				<div class="container">
					<div class="col-md-offset-2 col-md-8 col-sm-12">
						<h2>OTHER</h2>
						<p>no more</p>
						<a href="#" class="button default">other</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- SLIDER OPTIONS -->
	<div class="slider-options">
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-sm-4 col-xs-4 slider-nav">
					<!-- Controls -->
					<a class="left carousel-control" href="#home" role="button" data-slide="prev">
						<span class="fa fa-angle-left"></span>
					</a>
					<a class="right carousel-control" href="#home" role="button" data-slide="next">
						<span class="fa fa-angle-right"></span>
					</a>
				</div>

				<div class="col-md-4 col-sm-4 col-xs-4">
					<!-- Indicators -->
					<ol class="carousel-indicators">
						<li data-target="#home" data-slide-to="0" class="active"></li>
						<li data-target="#home" data-slide-to="1"></li>
						<li data-target="#home" data-slide-to="2"></li>
					</ol>
				</div>

				<div class="col-md-4 col-sm-4 text-right col-xs-4">
					<a href="#" id="scroll-to-content" class="go-down"><i class="fa fa-angle-down"></i></a>
				</div>

			</div>
		</div>
	</div>

</div> <!-- Carousel -->


<nav id="navigation">
	<div class="navbar navbar-default navbar-static-top" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<i class="fa fa-bars"></i>
				</button>
				<a class="navbar-brand" href="index.html">目录</a>
			</div>
			<div class="navbar-collapse collapse">

				<ul class="nav navbar-nav navbar-right">
					<li><a href="#home" class="current">Home</a></li>
					<li><a href="#about">About</a></li>
					<li><a href="#gallery">Gallery</a></li>
					<li><a href="#contact">Contact</a></li>
				</ul>

			</div><!--/.nav-collapse -->
		</div><!--/.container -->
	</div><!--navbar-default-->
</nav><!--navigation section end here-->
<section id="about" class="page-section first-section">
	<div class="container">
		<div class="row page-heading">
			<div class="col-md-8 col-sm-8">
				<h3 class="page-title"> About Me</h3>
				<p class="page-subtitle">随处可见的男性大三大学生</p>
			</div>
			<div class="col-md-4 col-sm-4 hidden-xs page-icon-holder">
				<p class="page-icon"><i class="fa fa-user"></i></p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4 col-sm-6 col-xs-12">
				<div class="profile-image">
					<img src="img/9.jpg" alt="">
				</div>
			</div>
			<div class="col-md-4 col-sm-6 col-xs-12">
				<div class="profile-content">
					<h4>周宇凡</h4>
					<span>管理学院 电子商务 2016级 1602班</span>
					<p>业余绘画爱好者/业余电影爱好者/业余阅读爱好者/业余音乐爱好者/业余摄影爱好者/
						业余Photoshop美工及数位板绘画/ 业余SAI数位板绘画/业余Premiere剪辑/业余模型拼装爱好者</p>
					<ul class="social-icons">
						<li><a href="#" class="fa fa-facebook"></a></li>
						<li><a href="#" class="fa fa-twitter"></a></li>
						<li><a href="#" class="fa fa-linkedin"></a></li>
						<li><a href="#" class="fa fa-rss"></a></li>
					</ul>
				</div>
			</div>
			<div class="col-md-4 col-sm-12 col-xs-12">
				<div class="my-skills">
					<h4>一技之长</h4>
					<p>基本没有。全部都是业余。</p>
					<ul class="progess-bars">
						<li>
							<span>美工，剪辑</span>
							<div class="progress">
								<div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;"></div>
							</div>
						</li>
						<li>
							<span>绘画</span>
							<div class="progress">
								<div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;"></div>
							</div>
						</li>
						<li>
							<span>其他</span>
							<div class="progress">
								<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"></div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</section>


<section id="gallery" class="page-section">
	<div class="container">
		<div class="row page-heading">
			<div class="col-md-8 col-sm-8">
				<h3 class="page-title">My Gallery</h3>
				<p class="page-subtitle">业余作品(技术有限)</p>
			</div>
			<div class="col-md-4 col-sm-4 hidden-xs text-right">
				<p class="page-icon"><i class="fa fa-camera"></i></p>
			</div>
		</div>
		<div class="row">
			<div class="gallery-holder">
				<div class="col-md-3 col-sm-6 col-xs-12 gallery-item">
					<div class="gallery-thumb">
						<img src="img/1.jpg" alt="">
						<div class="hover">
							<a href="#" class="fa fa-plus"></a>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-12 gallery-item">
					<div class="gallery-thumb">
						<img src="img/2.jpg" alt="">
						<div class="hover">
							<a href="#" class="fa fa-plus"></a>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-12 gallery-item">
					<div class="gallery-thumb">
						<img src="img/3.jpg" alt="">
						<div class="hover">
							<a href="#" class="fa fa-plus"></a>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-12 gallery-item">
					<div class="gallery-thumb">
						<img src="img/4.jpg" alt="">
						<div class="hover">
							<a href="#" class="fa fa-plus"></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>


<section id="contact" class="page-section">
	<div class="container">
		<div class="row page-heading">
			<div class="col-md-8 col-sm-8">
				<h3 class="page-title">联系</h3>
				<p class="page-subtitle">发送信息</p>
			</div>
			<div class="col-md-4 col-sm-4 hidden-xs text-right">
				<p class="page-icon"><i class="fa fa-envelope"></i></p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-9 col-sm-12">
				<div class="row">
					<form action="#" method="post" class="contact-form">
						<fieldset class="col-md-4 col-sm-6 col-xs-12">
							<input type="text" id="name" placeholder="Name...">
						</fieldset>
						<fieldset class="col-md-4 col-sm-6 col-xs-12">
							<input type="email" id="email" placeholder="Email...">
						</fieldset>
						<fieldset class="col-md-4 col-sm-12 col-xs-12">
							<input type="text" id="subject" placeholder="Subject...">
						</fieldset>
						<fieldset class="col-md-12 col-sm-12 col-xs-12">
							<textarea name="message" id="message" cols="30" rows="6" placeholder="Message..."></textarea>
						</fieldset>
						<fieldset class="col-md-12 col-sm-12 col-xs-12">
							<input type="submit" class="button default" value="Send Message">
						</fieldset>
					</form>
				</div>
			</div>
			<div class="col-md-3 col-sm-12">
				<div class="contact-info">
					<h4>联络信息</h4>
					<p>发送具体的联系信息，包括想要具体交流的内容</p>
					<ul class="social-icons">
						<li><a href="#" class="fa fa-facebook"></a></li>
						<li><a href="#" class="fa fa-twitter"></a></li>
						<li><a href="#" class="fa fa-linkedin"></a></li>
						<li><a href="#" class="fa fa-rss"></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</section>

<script src="js/vendor/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/min/plugins.min.js"></script>
<script src="js/min/main.min.js"></script>

</body>
</html>
